<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:p="http://primefaces.org/ui">  

    <h:head>  
        <title> LOGIN </title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <link rel="stylesheet" href="resources/css/style_login.css" />
        <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                if(args.validationFailed || !args.loggedIn) {  
                    jQuery('#dialog').effect("shake", { times:3 },100);  
                } else {  
                    dlg.hide();  
                    jQuery('#loginLink').fadeOut();
                    window.location="/CRI/inicio.xhtml";
                }  
            }  
        </script> 
    </h:head>  

    <h:body style="background-color: darkslategrey">


        <div class="wrap">

            <div class="header">

                <div class="logo"><a href="index.html"><img src="resources/img/imgLogin/logo.png" alt="" title="" border="0" /></a></div>


            </div> <!--End of header-->

        </div><!--End of wrap-->

        <div class="footer">

            <div class="footer_content">
                <div id="loginBorderBox"> 
                    <h:outputLink id="loginLink" value="javascript:void(0)" onclick="dlg.show()" title="login">
                        <center>
                            <p:graphicImage value="/resources/img/CRI.png" width="260px"/>
                        </center>
                    </h:outputLink>  
                </div> 

                <div class="clear"></div>

            </div> <!--End of footer_content-->

        </div><!--End of footer-->

       

        <p:growl id="growl" showDetail="true" life="3000" />  
        <p:dialog id="dialog" header="Acceso CRI" widgetVar="dlg">  

            <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

            <p:dialog modal="false" widgetVar="statusDialog" header="Cargando."
                      draggable="false" closable="false"  style="width:1px;height:1px;"> 
                Espera un momento por favor....
                <p:graphicImage value="/resources/img/loading3.gif" style="width: 120px; height: 120px"/>  
            </p:dialog>  


            <h:form>  
                <h:panelGrid columns="2" cellpadding="5" >  
                    <h:outputLabel for="username" value="Nombre Usuario:" />  
                    <p:inputText value="#{loginBean.usuario.login}"   
                                 id="username" required="true" label="username"
                                 requiredMessage="Debe ingresar un nombre de Usuario"/>  

                    <h:outputLabel for="password" value="Contraseña:" />  
                    <h:inputSecret value="#{loginBean.usuario.password}"   
                                   id="password" required="true" label="password"
                                   requiredMessage="Debe ingresar un Password"/>  
                    <f:facet name="footer">  
                        <p:commandButton id="loginButton" value="Ingresar" update=":growl"  ajax="true" 
                                         actionListener="#{loginBean.login}"   icon="llave" 
                                         oncomplete="handleLoginRequest(xhr, status, args)" />  
                    </f:facet>  
                </h:panelGrid>  
            </h:form>  
        </p:dialog>  
    </h:body>  
</html>  



